Font Awesome Kit は最初に提供された JavaScript ファイルを読み込むだけで自動的に HTML に含まれる Font Awesome 関連の要素を見つけ出し、対象の使っているフォントだけを読み込み適用できます。これにより、使うものだけを svg で切り出して使うといったことをせずとも常に必要最低限のデータしか読み込まないサイトを作れます。
Font Awesome Kit はログイン後fontawesome.com/startから作れます。
作成すると画像のように上部に<script ...>
のコードがあるはずです。なんとこれを自分の HTML に貼るだけで後はこのスクリプトがよしなにしてくれます!
(🤔一応試したのは<i class="fab fa-font-awesome"></i>
のような形だけなので、違う要素などでもいけるのかは不明です)
スクリプトの中で何をしてるかざっと
中ではMurationObserver
API を用いてdocument
を監視しています。有効になってるオプションはchildList
とsubtree
の2つなので恐らく、「何かしらノードが追加または削除された時にfa-*
クラスが付いている要素などを見つたら、それが使っているアイコンを読み込む」ようなことをしてるのではと考えます。
// 対象の部分
new MutationObserver(n).observe(document,{childList:!0,subtree:!0}))